<template>
    <el-form :inline="true" :model="Form" class="demo-form-inline"
     :class="props.className || ''">
        <!-- 库存、外协、客户，使用的封装表单 -->
        <el-form-item :label="item.label" v-for="(item, index) in FormLabel" :key="index" :required="item.required"  :class="item.itemClassName">
            <!-- 输入框 --> 
            <el-input v-model="Form[item.name]"  clearable v-if="!item.type || item.type == 'input'" :disabled="props.isDisabled || item.disabled"/>
            <!-- 下拉选框 -->
            <el-select placeholder="请选择客户" v-model="Form[item.name]" clearable v-if="item.type == 'select'" :disabled="props.isDisabled" >
                <el-option :label="item1.label" :value="item1.value" v-for="(item1, index) in item.client" 
                    :key="item1.value" />
            </el-select>
            <!-- 日期选框 -->
            <el-date-picker  v-model="Form[item.name]"  v-else-if="item.type == 'picker'" type="date" :disabled="props.isDisabled" 
                placeholder="请输入日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            <!-- 开始到结束 -->
            <el-date-picker  v-model="Form[item.name]"  v-else-if="item.type == 'datetimerange'" type="datetimerange" start-placeholder="开始" :disabled="props.isDisabled" 
                end-placeholder="结束" format="YYYY-MM-DD" date-format="YYYY/MM/DD" time-format="HH:mm" value-format="YYYY-MM-DD"/>
            <!-- 单选选框 -->
            <div class="radio" v-else-if="item.type == 'radio'" >
                <el-radio-group v-model="Form[item.name]" :disabled="props.isDisabled">
                    <el-radio :label="item1.value" :value="item1.value" v-for="item1 in item.client">
                    {{ item1.label }}</el-radio>
                </el-radio-group>
            </div>
            <!-- 文本域 -->
            <el-input v-model="Form[item.name]" type="textarea" v-else-if="item.type == 'textarea'" :disabled="props.isDisabled"/>
        </el-form-item>

    </el-form>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps(['Form', 'FormLabel', 'saleClient', 'dateSelect', 'className', 'nobtn','isDisabled'])

</script>
<style scoped lang='scss'>
.demo-form-inline {
    :deep(.el-form-item) {
        margin-right: 12px !important;
    }

    :deep(.el-form-item__label) {
        font-size: 14px;
    }


    :deep(.el-form-item__label) {
        font-size: 16px;
    }

    :deep(.el-form-item) {
        width: 376px;
    }

    :deep(.el-input__wrapper) {
        width: 100%;
    }

    :deep(.el-form-item__label) {
        height: 43px;
        line-height: 43px;
    }

    :deep(.el-input) {
        height: 100%;
    }

    :deep(.el-input__inner) {
        height: 43px;
    }

    .reset {
        background-color: #fff;
        color: #333;
    }


}
</style>
